import { getSender, postSender } from "@/api/modules/notification";
import PageHeader from "@/components/Frame/PageHeader";
import { PASSWORD_KEY } from "@/config/config";
import { decrypt, encrypt } from "@/utils/encrypt";
import { showTips } from "@/utils/util";
import { ComponentInternalInstance, getCurrentInstance } from "vue";

export default defineComponent({
	setup() {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const state = reactive<any>({
			key: PASSWORD_KEY,
			cacheSender: [],
			conf: {
				accessKey: "",
				accessSecret: "",
				signName: "",
				host: "",
				port: "",
				username: "",
				password: ""
			}
		});

		onMounted(() => {
			init();
		});
		const init = async () => {
			let { result } = await getSender({});
			if (result) {
				state.cacheSender = result;
				result.map((item: any) => {
					state.conf[item.id.split(".")[1]] = item.value;
				});
				state.conf.accessKey = decrypt(state.conf.accessKey, state.key, state.key);
				state.conf.accessSecret = decrypt(state.conf.accessSecret, state.key, state.key);
				state.conf.password = decrypt(state.conf.password, state.key, state.key);
			}
		};
		const rules = reactive({
			signName: [{ required: true, message: proxy?.$t("serviceset.formrule.signname") }],
			accessKey: [{ required: true, message: proxy?.$t("serviceset.formrule.access_key") }],
			accessSecret: [{ required: true, message: proxy?.$t("serviceset.formrule.access_secret") }],
			host: [{ required: true, message: proxy?.$t("serviceset.formrule.host") }],
			port: [{ required: true, message: proxy?.$t("serviceset.formrule.port") }],
			username: [{ required: true, message: proxy?.$t("serviceset.formrule.username") }],
			password: [{ required: true, message: proxy?.$t("serviceset.formrule.password") }]
		});
		const onSubmit = async () => {
			state.conf.accessKey = encrypt(state.conf.accessKey, state.key, state.key);
			state.conf.accessSecret = encrypt(state.conf.accessSecret, state.key, state.key);
			state.conf.password = encrypt(state.conf.password, state.key, state.key);
			let settings = state.cacheSender.map((item: any) => {
				if (state.conf[item.id.split(".")[1]]) {
					item.value = state.conf[item.id.split(".")[1]];
				}
				return item;
			});

			let { code, message } = await postSender({ settings });
			let ok = showTips(code, "系统设置", message);
			if (ok) init();
		};
		return () => {
			return (
				<div>
					<PageHeader back={false} title={proxy?.$t("serviceset.page_title.setting")} />
					<div class="bg-white pl-8 pr-8 pt-2 	">
						<div class="block-title border-bottom">{proxy?.$t("serviceset.title.SMS")}</div>
						<div class="p-4 mt-4">
							<el-form label-width="120px" rules={rules} model={state.conf}>
								<el-form-item label={proxy?.$t("serviceset.form_label.signname")} prop="signName">
									<el-input v-model={state.conf.signName} />
								</el-form-item>
								<el-form-item label={proxy?.$t("serviceset.form_label.access_key")} prop="accessKey">
									<el-input v-model={state.conf.accessKey} type="password" autocomplete="new-password" show-password />
								</el-form-item>
								<el-form-item label={proxy?.$t("serviceset.form_label.access_secret")} prop="accessSecret">
									<el-input v-model={state.conf.accessSecret} type="password" autocomplete="new-password" show-password />
								</el-form-item>
								<el-form-item>
									<el-button type="primary" onClick={onSubmit}>
										{proxy?.$t("serviceset.btn.save")}
									</el-button>
								</el-form-item>
							</el-form>
						</div>
					</div>

					<div class="bg-white pl-8 pr-8 pt-2 mt-4">
						<div class="block-title border-bottom">{proxy?.$t("serviceset.title.mail")}</div>
						<div class="p-4 mt-4">
							<el-form label-width="120px" rules={rules} model={state.conf}>
								<el-form-item label={proxy?.$t("serviceset.form_label.host")} prop="host">
									<el-input v-model={state.conf.host} />
								</el-form-item>
								<el-form-item label={proxy?.$t("serviceset.form_label.port")} prop="port">
									<el-input v-model={state.conf.port} />
								</el-form-item>
								<el-form-item label={proxy?.$t("serviceset.form_label.username")} prop="username">
									<el-input v-model={state.conf.username} />
								</el-form-item>
								<el-form-item label={proxy?.$t("serviceset.form_label.password")} prop="password">
									<el-input v-model={state.conf.password} type="password" autocomplete="new-password" show-password />
								</el-form-item>
								<el-form-item>
									<el-button type="primary" onClick={onSubmit}>
										{proxy?.$t("serviceset.btn.save")}
									</el-button>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</div>
			);
		};
	}
});
